<div class="mid">
    <div class="search">
      <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
        <input type="text" nz-input [placeholder]="'search.plch'|translate" [(ngModel)]="searchWord">
      </nz-input-group>
      <ng-template #suffixIconButton>
        <button 
        nz-button 
        nzType="primary" 
         nzSearch (click)="searchSong()"><i nz-icon nzType="search"></i></button>
      </ng-template>
      <nz-table 
      [nzShowPagination]="false"
      [nzShowSizeChanger]="false"
      [nzData]="songList">
        <thead>
          <tr>
            <th>{{'search.song'|translate}}</th>
            <th>{{'search.artist'|translate}}</th>
            <th>{{'search.ablum'|translate}}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of songList" (click)="playSong(item.id);getSongUrl();play()">
            <td>{{ item.name }}</td>
            <td>{{ item.ar[0].name }}</td>
            <td>{{ item.al.name }}</td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
